//列表
var listdata1=[
	['艾斐域(上海)信息科技有限公司北京分公司','714886'],
	['北京明智墨思科技有限公司','703438'],
	['北京卓越通达科技有限公司','617057'],
	['北京乐博域明科技有限公司','434381'],
	['北京然迪克思科技有限公司','330603'],
	['北京阿里巴巴云计算技术有限公司','260323'],
	['纽思塔（北京）科技有限公司','220242'],
	['技慕科技（北京）有限公司','197269'],
	['北龙中网（北京）科技有限责任公司','130446'],
	['北京千橡网景科技发展有限公司','119521']
]
var listdata2=[
	['阿里云计算有限公司-服务商','10160939'],
	['阿里巴巴通信技术（北京）有限公司-服务商','6145714'],
	['厦门三五互联域名注册','397380'],
	['上海美橙科技信息发展有限公司','287731'],
	['厦门市中资源+域名注册','220160'],
	['厦门易名科技-域名注册','206129'],
	['厦门商中在线+域名注册服务机构','136787'],
	['成都飞数科技有限公司注册域名','40070'],
	['成都世纪东方网络通信有限公司','12393'],
	['山东开创集团股份有限公司','10420']
]
var listdata3=[
	['阿里云计算有限公司-权威',23779551],
	['厦门易名科技-权威解析',8334515],
	['厦门点媒网络科技+权威解析',228304],
	['厦门市中资源+权威解析',196170],
	['广东时代互联科技有限公司',185091],
	['中国移动通信集团重庆有限公司权威解析',29776],
	['江苏网路神电子商务技术有限公司-权威解析服务',4020],
	['湖南长沙移动公司',481],
	['中国移动通信集团安徽有限公司',249],
	['贵州移动通信公司',216]                
]
listEvt(listdata1)

$(".right_content_center li").click(function(){
	n=$(this).index();
	$(this).addClass('active').siblings().removeClass('active')
	if(n==0){
		listEvt(listdata1)
	}else if(n==1){
		listEvt(listdata2)
	}else if(n==2){
		listEvt(listdata3)
	}
})

function listEvt(data){
	$(".right_content_center .tab_content").html("")
        for(var i=0;i<data.length;i++){
            $(".right_content_center .tab_content").append("<tr>"+
                    "<td style='width:60px'>"+(i+1)+"</td>"+
                    "<td title='"+data[i][0]+"'>"+data[i][0]+"</td>"+
                    "<td title='"+data[i][1]+"'>"+data[i][1]+"</td>"+
                +"</tr>")
        }
}

//地图
var geoCoordMap = {};
var mapFeatures = echarts.getMap('china').geoJson.features;
mapFeatures.forEach(function(v) {
    // 地区名称
    var name = v.properties.name;
    // 地区经纬度
    geoCoordMap[name] = v.properties.cp;
});
/*var convertData = function (data) {
	console.log(data)
  var res = [];
  for (var i = 0; i < data.length; i++) {
      var geoCoord = geoCoordMap[data[i].name];
      if (geoCoord) {
          res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value),
          });
      }
  }
//console.log(res,'--22----')
  return res;
};*/



var mapData=[
	{name:'海南',value:4,manageCount:0,serverCount:1,authCount:0,recurCount:3,domainCount:0},
	{name:'重庆',value:8,manageCount:0,serverCount:1,authCount:2,recurCount:5,domainCount:0},
	{name:'内蒙古',value:4,manageCount:0,serverCount:0,authCount:1,recurCount:3,domainCount:0},
	{name:'辽宁',value:5,manageCount:0,serverCount:1,authCount:0,recurCount:4,domainCount:0},
	{name:'广东',value:14,manageCount:2,serverCount:7,authCount:3,recurCount:2,domainCount:40831},
	{name:'广西',value:3,manageCount:0,serverCount:0,authCount:0,recurCount:3,domainCount:0},
	{name:'吉林',value:4,manageCount:0,serverCount:0,authCount:1,recurCount:3,domainCount:0},
	{name:'河南',value:3,manageCount:0,serverCount:0,authCount:0,recurCount:3,domainCount:0},
	{name:'山西',value:4,manageCount:0,serverCount:0,authCount:1,recurCount:3,domainCount:0},
	{name:'福建',value:15,manageCount:1,serverCount:6,authCount:5,recurCount:3,domainCount:0},
	{name:'江西',value:3,manageCount:0,serverCount:0,authCount:1,recurCount:2,domainCount:0},
	{name:'山东',value:3,manageCount:0,serverCount:1,authCount:1,recurCount:1,domainCount:0},
	{name:'湖北',value:3,manageCount:0,serverCount:0,authCount:0,recurCount:3,domainCount:0},
	{name:'湖南',value:3,manageCount:0,serverCount:0,authCount:1,recurCount:2,domainCount:0},
	{name:'黑龙江',value:3,manageCount:0,serverCount:0,authCount:0,recurCount:3,domainCount:0},
	{name:'陕西',value:3,manageCount:0,serverCount:0,authCount:0,recurCount:3,domainCount:0},
	{name:'上海',value:3,manageCount:0,serverCount:1,authCount:1,recurCount:1,domainCount:775109},
	{name:'江苏',value:9,manageCount:1,serverCount:2,authCount:1,recurCount:5,domainCount:17542},
	{name:'云南',value:2,manageCount:0,serverCount:0,authCount:1,recurCount:1,domainCount:0},
	{name:'青海',value:3,manageCount:0,serverCount:0,authCount:0,recurCount:3,domainCount:0},
	{name:'四川',value:5,manageCount:0,serverCount:2,authCount:0,recurCount:3,domainCount:0},
	{name:'浙江',value:10,manageCount:0,serverCount:4,authCount:3,recurCount:3,domainCount:232843},
	{name:'安徽',value:4,manageCount:0,serverCount:0,authCount:1,recurCount:3,domainCount:0},
	{name:'北京',value:27,manageCount:18,serverCount:2,authCount:1,recurCount:6,domainCount:2847875},
	{name:'天津',value:4,manageCount:0,serverCount:1,authCount:1,recurCount:2,domainCount:0},
	{name:'河北',value:4,manageCount:0,serverCount:0,authCount:0,recurCount:4,domainCount:0},
	{name:'贵州',value:4,manageCount:0,serverCount:0,authCount:1,recurCount:3,domainCount:0},
	{name:'西藏',value:1,manageCount:0,serverCount:0,authCount:0,recurCount:1,domainCount:0},
	{name:'甘肃',value:3,manageCount:0,serverCount:0,authCount:1,recurCount:2,domainCount:0},
	{name:'宁夏',value:3,manageCount:0,serverCount:0,authCount:0,recurCount:3,domainCount:0},
	{name:'新疆',value:3,manageCount:0,serverCount:0,authCount:0,recurCount:3,domainCount:0}
]

for(var i=0;i<mapData.length;i++){
	for(var key in geoCoordMap){
		if(key==mapData[i].name){
			mapData[i].value=geoCoordMap[key].concat(mapData[i].value)
		}
	}
}
//console.log(mapData)
	
var optionMap = {
	textStyle: {},
	tooltip: {
		trigger: 'item',
		textStyle: {},
		formatter:function(param){
			var name = param.name;
			if(name != '香港' && name !='澳门' && name !='台湾'){
				return '<div>'+param.name+'</div>'+
				       '<div>注册管理机构数量：'+param.data.manageCount+'</div>'+
				       '<div>注册服务机构数量：'+param.data.serverCount+'</div>'+
				       '<div>权威解析机构数量：'+param.data.authCount+'</div>'+
				       '<div>递归解析机构数量：'+param.data.recurCount+'</div>'+
				       '<div>域名数量：'+param.data.domainCount+'</div>';
			}
		}
	},
 	geo: {
		show: true,
		zoom: 1.2,
		roam: false,	
		map:'china',
		itemStyle: {
			normal: {
				show:false,
				borderColor: '#285ac6',
				borderWidth: 1,
				areaColor: '#123082',
				shadowBlur: 3,
				shadowColor:'#081435',
				shadowOffsetX: -4,
				shadowOffsetY: 8
			},
			emphasis: {
				areaColor: '#fce24f',
				borderColor: '#fce24f'
			}
		}
	},
	series: [{
		type: 'map',
		zoom: 1.2,
		mapType: 'china',
//		geoIndex: 0,
		roam: false,
		label: {
			normal: {
				show: false,
				textStyle: {
					color: '#fff'
				}
			},
			emphasis: {
				show: true,
				textStyle: {
					color: '#fff'
				}
			}
		},
		itemStyle: {
			normal: {
				show:false,
				borderColor: '#3770ea',
				borderWidth: 1,
				areaColor: '#0f2d87'
			},
			emphasis: {
				areaColor: '#2a56bd',
				borderColor: '#2a56bd',
//				opacity: 0.8,
			}
		},
		data:mapData
	},{
		 	name: 'Top 5',
      type: 'effectScatter',
      zlevel: 1,
      coordinateSystem: 'geo',
      symbolSize: function (val) {
          return val[2]+5;
      },
      showEffectOn: 'render',
      rippleEffect: {
          brushType: 'stroke'
      },
      hoverAnimation: true,
      label: {
          normal: {
//            formatter: '{b}',
		        position: 'right',
		        show: false
          }
      },
      itemStyle: {
          normal: {
              color: '#f4e925',
              shadowBlur: 10,
              shadowColor: '#333'
          }
      },
//    data: convertData(mapData)
			data:mapData.sort(function(a,b){
				return b.value[2]-a.value[2]
			}).slice(0,5)
	},{
		 	name: 'Top 5',
      type: 'scatter',
      zlevel: 1,
      coordinateSystem: 'geo',
      symbolSize: function (val) {
          return val[2]+5;
      },
      showEffectOn: 'render',
      rippleEffect: {
          brushType: 'stroke'
      },
      hoverAnimation: true,
      label: {
          normal: {
//            formatter: '{b}',
		        position: 'right',
		        show: false
          }
      },
      itemStyle: {
          normal: {
              color: '#f4e925',
              shadowBlur: 10,
              shadowColor: '#333'
          }
      },
//    data: convertData(mapData)
			data:mapData.sort(function (a, b) {
          return b.value[2]-a.value[2]
      }).slice(5)
	}]
};
var mapChart = echarts.init(document.getElementById('ec_map_th'))
function autoLayout(el){
	var winW=$(window).width();
	var fontSize=winW>3000?20:12
	el.textStyle.fontSize=fontSize
	el.tooltip.textStyle.fontSize=fontSize
	return el
}
mapChart.setOption(autoLayout(optionMap))
window.addEventListener('resize',function(){
})

//var n=0;
/*function auto(){
//	console.log(mapData[0])
	if(n>mapData.length-1){
		n=0;
	}
	for(var i=0;i<mapData.length;i++){
		mapData[i].selected=false;
	}
	var name = mapData[n].name;
	if(name != '香港' && name !='澳门' && name !='台湾'){
		mapData[n].selected=true;
		//mapData[n].itemStyle.color='red';
		console.log(mapData[n]);
		
		var name = mapData[n].name;
		getResourceNoShow(name);
		
		mapChart.setOption(optionMap);
	}
	n++;
}
auto();*/
var count = 0;
var timer = null;
var dataLength = optionMap.series[0].data.length;
var auto=function(){
		$(".resource_no").html("")
    $(".resource_no").append("<tr>"+
    "<td>"+mapData[count% dataLength].name+"</td>"+
    "<td>"+mapData[count% dataLength].manageCount+"</td>"+
    "<td>"+mapData[count% dataLength].serverCount+"</td>"+
    "<td>"+mapData[count% dataLength].authCount+"</td>"+
    "<td>"+mapData[count% dataLength].recurCount+"</td>"+
    "<td>"+mapData[count% dataLength].domainCount+"</td>"+
	"</tr>")
	mapChart.dispatchAction({
    type: 'downplay',
    seriesIndex: 0,
  });
  mapChart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: (count) % dataLength
  });
  mapChart.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: (count) % dataLength
  });
  count++;
}
auto()
var timer=setInterval(auto,2000)
mapChart.on('mouseover',function(parmas){
	clearInterval(timer)
	console.log(parmas)
	$(".resource_no").html("")
    $(".resource_no").append("<tr>"+
    "<td>"+parmas.data.name+"</td>"+
    "<td>"+parmas.data.manageCount+"</td>"+
    "<td>"+parmas.data.serverCount+"</td>"+
    "<td>"+parmas.data.authCount+"</td>"+
    "<td>"+parmas.data.recurCount+"</td>"+
    "<td>"+parmas.data.domainCount+"</td>"+
	"</tr>")
})

mapChart.on('mouseout',function(){
	clearInterval(timer)
	timer=setInterval(auto,2000)
})

ranklistRightData();
function ranklistRightData(){
	var rankListRight = $('#rankListRight');
	rankListRight.empty();
	var datas = [
		['.cn','5724293'],
		['.com','5174700'],
		['.top','1311519'],
		['.info','947800'],
		['.wang','938441'],
		['.vip','871333'],
		['.xyz','709351'],
		['.club','686736'],
		['.xin','650026'],
		['.net','591001'],
		['.shop','377340'],
		['.biz','275530'],
		['.ren','216401'],
		['.政务','133694'],
		['.网址','133694'],
		['.site','133653'],
		['.中国','77534'],
		['.公司','68029'],
		['.ink','62930'],
		['.网络','43846'],
		['.mobi','43412'],
		['.我爱你','32823'],
		['.商标','21479'],
		['.在线','11934'],
		['.pro','11654'],
		['.商城','9242'],
		['.集团','4060'],
		['.手机','4024'],
		['.网店','3932'],
		['.广东','184'],
		['.中文网','164'],
		['.citic','152'],
		['.信息','122'],
		['.中信','117'],
		['.佛山','114'],
		['.sohu','7']
	];
	var str = "<table class='tab_content'>";
	for(var i = 0 ; i < datas.length ; i++){
		str +="<tr>"+
    	"<td>"+(i+1)+"</td>"+
    	"<td>"+datas[i][0]+"</td>"+
    	"<td>"+datas[i][1]+"</td>"+
    	"</tr>"
	}
	str +="</table>";
	rankListRight.append(str);
}



//柱状图
function yData(data){
	var dataY=[]
	for(var i=0;i<data.length;i++){
		dataY.push(data[i].name)
	}
	return dataY
}

function xData(data){
	var dataX=[]
	for(var i=0;i<data.length;i++){
		dataX.push(data[i].value)
	}
	return dataX
}

var xMax = 10;
//第一个柱状图
var data=[{
	name:'江苏',
	value:2
},{
	name:'北京',
	value:2
},{
	name:'浙江',
	value:4
},{
	name:'福建',
	value:6
},{
	name:'广东',
	value:7
}]

//第二个柱状图
var data2=[{
	name:'江西',
	value:1
},{
	name:'重庆',
	value:2
},{
	name:'浙江',
	value:3
},{
	name:'广东',
	value:3
},{
	name:'福建',
	value:5
}]

//第三个柱状图
var data3=[{
	name:'辽宁',
	value:4
},{
	name:'河北',
	value:4
},{
	name:'江苏',
	value:5
},{
	name:'重庆',
	value:5
},{
	name:'北京',
	value:6
}]


var barOption = function(){
	var winW=$(window).width();
	var fontSize=winW>3000?20:12;
	var option= {
		textStyle:{
			fontSize: fontSize
		},
    tooltip: {
        show: true,
        textStyle:{
					fontSize: fontSize
				},
        formatter: "{b} {c}"
    },
    grid: {
        left: '0',
        top: '5%',
        bottom: '0',
        right: '20'
    },
    xAxis: [{
        max: xMax,
        type: 'value',
        axisTick: {
            show: false,
        },
        axisLine: {
            show: false,
        },
        axisLabel: {
            show: false
        },
        splitLine: {
            show: false
        }
    }],
    yAxis: [{
        type: 'category',
//      data: yData(data),
        axisLabel:{
        	show:false,
           color: '#fff'
        },
        axisTick: {
            show: false,
        },
        axisLine: {
            show: false,
        }
    }],
    series: [{
        name: ' ',
        type: 'bar',
        barWidth: 3,
      //  silent: true,
        itemStyle: {
            normal: {
                color: '#586ca7'
            }
        },
        barGap: '-100%',
       // barCategoryGap: '40%',
        data: data.map(function(d) {
            return xMax
        }),
    }, {
        name: ' ',
        type: 'bar',
        barWidth: 3,
        itemStyle: {
            normal: {
                color: '#fffd69'
            }
        },
        label: {
            normal: {
                show: false,
                position: 'right',
                formatter: '{c}%',
            }
        },
//      data: xData(data)
  
    }]
	};
	console.log(winW,option)
	return option
}
//数据设置
var barOption1st=barOption();
barOption1st.series[1].data=xData(data)
barOption1st.yAxis[0].data=yData(data)

var lineChart1 = echarts.init(document.getElementById('ec_line1st'))
lineChart1.setOption(barOption1st)

for(var i=0;i<data.length;i++){
	$(".line_title").prepend('<li>'+data[i].name+'  <strong>'+data[i].value+'</strong></li>')
}

$(".right_content_top li").click(function(){
	n=$(this).index();
	$(this).addClass('active').siblings().removeClass('active')
	if(n==0){
		
		var barOption1st=barOption();
		barOption1st.series[1].data=xData(data)
		barOption1st.yAxis[0].data=yData(data)
		lineChart1.setOption(barOption1st)

		var titleData=yData(data);
		$(".line_title").html("")
		for(var i=0;i<data.length;i++){
			$(".line_title").prepend('<li>'+data[i].name+'  <strong>'+data[i].value+'</strong></li>')
		}
		
	}else if(n==1){
		
		var barOption2st=barOption();
		barOption2st.series[1].data=xData(data2)
		barOption2st.yAxis[0].data=yData(data2)
		lineChart1.setOption(barOption2st)

		$(".line_title").html("")
		for(var i=0;i<data2.length;i++){
			$(".line_title").prepend('<li>'+data2[i].name+'  <strong>'+data2[i].value+'</strong></li>')
		}
		
	}else if(n==2){
		
		var barOption3th=barOption();
		barOption3th.series[1].data=xData(data3)
		barOption3th.yAxis[0].data=yData(data3)
		lineChart1.setOption(barOption3th)

		$(".line_title").html("")
		for(var i=0;i<data3.length;i++){
			$(".line_title").prepend('<li>'+data3[i].name+'  <strong>'+data3[i].value+'</strong></li>')
		}

	}
})

//饼图
/*var  color = ["#00a9e1","#0046af","#360293","#fce24f","#44e4f9","#b5f5a4"];
var pieData=[
        {value: 123548849, name: ".com"},
        {value: 41998164, name: ".net"},
        {value: 9552989, name: ".cn"},
        {value: 4310811, name: ".am"},
        {value: 1638902, name: ".com.cn"},
        {value: 3127494, name: "其他"}
]
var pie3Opt = {
    color:color,
    backgroundColor: 'transparent',
    legend: {
        show:false,
        orient: 'vertical',
        right: '15%',
        top: 'middle',
        data:['.com','.net','.cn','.am','.com.cn','其他'],
        textStyle:{
            color:'#fff'
        }
    },
    tooltip: {
        show: false
    },
    series: [{
        name: '占比',
        type: 'pie',
        radius: ['60%', '80%'],
        center: ['45%', '45%'],
        hoverAnimation: true,
        label: {
            normal: {
                show: false,
                position: 'center'
            },
            emphasis: {
                show: false,
                textStyle: {
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            }
        },
        data: pieData
    },{
            name: '',
            type: 'pie',
            clockWise: true,
            hoverAnimation: false,
            animationType: 'scale',
            radius: [200, 200],
            center: ['45%', '50%'],
            label: {
                normal: {
                    position: 'center'
                }
            },
            data: [{
                value: 0,
                label: {
                    normal: {
                        formatter: '38',
                        textStyle: {
                            color: '#20fd07',
                            fontSize: 25,
                            fontWeight: 'bold'
                        }
                    }
                }
            }, {
                tooltip: {
                    show: false
                },
                label: {
                    normal: {
                        formatter: '\n门户',
                        textStyle: {
                            color: '#bbeaf9',
                            fontSize: 12
                        }
                    }
                }
            }]
        }]
};
var pie3Chart = echarts.init(document.getElementById('ec_pie'))


function sum(){
	var totle=0;
	for(var i=0;i<pieData.length;i++){
		totle+=pieData[i].value
	}
	return totle
}
var pieIndex = 0
var pieAutoShow = function(){
    if (pieIndex > pieData.length-1){
        pieIndex = 0
    }
    for (var i = 0;i < pieData.length;i++){
        if (i != pieIndex){
            pie3Opt.series[0].data[i]['selected'] = false;
        }else{
            pie3Opt.series[0].data[i]['selected'] = true;
        }
    }
    //pie3Opt.series[1].data[0].label.normal.formatter = pie3Opt.series[0].data[pieIndex].value + ""
    pie3Opt.series[1].data[0].label.normal.formatter=(pie3Opt.series[0].data[pieIndex].value/sum()*100).toFixed(1) + "%"
    pie3Opt.series[1].data[1].label.normal.formatter = "" + pie3Opt.series[0].data[pieIndex].name
    pie3Chart.setOption(pie3Opt)
    pieIndex++
    setTimeout(pieAutoShow,1200)
}
pieAutoShow()*/


window.addEventListener('resize',function(){
	mapChart.resize();
	mapChart.setOption(autoLayout(optionMap))
	lineChart1.resize();
	lineChart1.setOption(barOption1st)
})